<template>
  <div class="store-pivot-analysis">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">📊 门店数据透视分析</span>
          <div class="header-actions">
            <el-button type="success" @click="handleSaveConfig">
              <el-icon><Check /></el-icon>
              保存配置
            </el-button>
            <el-button type="primary" @click="handleLoadConfig">
              <el-icon><FolderOpened /></el-icon>
              加载配置
            </el-button>
            <el-button type="warning" @click="handleExport">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 配置区域 -->
      <el-row :gutter="20" class="config-section">
        <!-- 可用字段 -->
        <el-col :xs="24" :md="6">
          <el-card shadow="never" class="field-card">
            <template #header>
              <div class="field-header">
                <span>📋 可用字段</span>
                <el-input
                  v-model="fieldSearch"
                  placeholder="搜索字段"
                  size="small"
                  clearable
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
              </div>
            </template>
            <draggable
              v-model="filteredFields"
              :group="{ name: 'fields', pull: 'clone', put: false }"
              :clone="cloneField"
              item-key="id"
              class="field-list"
            >
              <template #item="{ element }">
                <div class="field-item" :class="`field-type-${element.type}`">
                  <el-icon class="field-icon">
                    <component :is="getFieldIcon(element.type)" />
                  </el-icon>
                  <span class="field-name">{{ element.label }}</span>
                  <el-tag size="small" :type="getFieldTypeTag(element.type)">
                    {{ getFieldTypeName(element.type) }}
                  </el-tag>
                </div>
              </template>
            </draggable>
          </el-card>
        </el-col>

        <!-- 配置区 -->
        <el-col :xs="24" :md="18">
          <el-row :gutter="15">
            <!-- 行字段 -->
            <el-col :span="12">
              <el-card shadow="never" class="drop-zone-card">
                <template #header>
                  <span class="zone-title">📐 行字段</span>
                </template>
                <draggable
                  v-model="rowFields"
                  group="fields"
                  item-key="id"
                  class="drop-zone"
                  :class="{ empty: rowFields.length === 0 }"
                >
                  <template #item="{ element, index }">
                    <div class="selected-field">
                      <el-icon><Menu /></el-icon>
                      <span>{{ element.label }}</span>
                      <el-button
                        link
                        type="danger"
                        size="small"
                        @click="removeField(rowFields, index)"
                      >
                        <el-icon><Close /></el-icon>
                      </el-button>
                    </div>
                  </template>
                  <template #footer>
                    <div v-if="rowFields.length === 0" class="drop-placeholder">
                      拖拽字段到这里
                    </div>
                  </template>
                </draggable>
              </el-card>
            </el-col>

            <!-- 列字段 -->
            <el-col :span="12">
              <el-card shadow="never" class="drop-zone-card">
                <template #header>
                  <span class="zone-title">📊 列字段</span>
                </template>
                <draggable
                  v-model="columnFields"
                  group="fields"
                  item-key="id"
                  class="drop-zone"
                  :class="{ empty: columnFields.length === 0 }"
                >
                  <template #item="{ element, index }">
                    <div class="selected-field">
                      <el-icon><Menu /></el-icon>
                      <span>{{ element.label }}</span>
                      <el-button
                        link
                        type="danger"
                        size="small"
                        @click="removeField(columnFields, index)"
                      >
                        <el-icon><Close /></el-icon>
                      </el-button>
                    </div>
                  </template>
                  <template #footer>
                    <div v-if="columnFields.length === 0" class="drop-placeholder">
                      拖拽字段到这里
                    </div>
                  </template>
                </draggable>
              </el-card>
            </el-col>

            <!-- 数值字段 -->
            <el-col :span="12">
              <el-card shadow="never" class="drop-zone-card">
                <template #header>
                  <span class="zone-title">🔢 数值字段</span>
                </template>
                <draggable
                  v-model="valueFields"
                  group="fields"
                  item-key="id"
                  class="drop-zone value-zone"
                  :class="{ empty: valueFields.length === 0 }"
                >
                  <template #item="{ element, index }">
                    <div class="selected-field value-field">
                      <el-icon><Menu /></el-icon>
                      <span>{{ element.label }}</span>
                      <el-select
                        v-model="element.aggregation"
                        size="small"
                        style="width: 80px; margin: 0 5px;"
                        @click.stop
                      >
                        <el-option label="求和" value="sum" />
                        <el-option label="平均" value="avg" />
                        <el-option label="计数" value="count" />
                        <el-option label="最大" value="max" />
                        <el-option label="最小" value="min" />
                      </el-select>
                      <el-button
                        link
                        type="danger"
                        size="small"
                        @click="removeField(valueFields, index)"
                      >
                        <el-icon><Close /></el-icon>
                      </el-button>
                    </div>
                  </template>
                  <template #footer>
                    <div v-if="valueFields.length === 0" class="drop-placeholder">
                      拖拽数值字段到这里
                    </div>
                  </template>
                </draggable>
              </el-card>
            </el-col>

            <!-- 筛选条件 -->
            <el-col :span="12">
              <el-card shadow="never" class="drop-zone-card">
                <template #header>
                  <span class="zone-title">🔍 筛选条件</span>
                </template>
                <draggable
                  v-model="filterFields"
                  group="fields"
                  item-key="id"
                  class="drop-zone filter-zone"
                  :class="{ empty: filterFields.length === 0 }"
                >
                  <template #item="{ element, index }">
                    <div class="selected-field filter-field">
                      <el-icon><Menu /></el-icon>
                      <span>{{ element.label }}</span>
                      <el-select
                        v-model="element.operator"
                        size="small"
                        style="width: 70px; margin: 0 5px;"
                        @click.stop
                      >
                        <el-option label="等于" value="=" />
                        <el-option label="不等" value="!=" />
                        <el-option label="大于" value=">" />
                        <el-option label="小于" value="<" />
                        <el-option label="包含" value="like" />
                      </el-select>
                      <el-input
                        v-model="element.value"
                        size="small"
                        placeholder="值"
                        style="width: 100px; margin: 0 5px;"
                        @click.stop
                      />
                      <el-button
                        link
                        type="danger"
                        size="small"
                        @click="removeField(filterFields, index)"
                      >
                        <el-icon><Close /></el-icon>
                      </el-button>
                    </div>
                  </template>
                  <template #footer>
                    <div v-if="filterFields.length === 0" class="drop-placeholder">
                      拖拽字段设置筛选条件
                    </div>
                  </template>
                </draggable>
              </el-card>
            </el-col>
          </el-row>

          <!-- 分析按钮 -->
          <div class="analyze-section">
            <el-button
              type="primary"
              size="large"
              :loading="loading"
              @click="handleAnalyze"
            >
              <el-icon><TrendCharts /></el-icon>
              执行分析
            </el-button>
          </div>
        </el-col>
      </el-row>

      <!-- 结果展示区 -->
      <div v-if="pivotData && pivotData.length > 0" class="result-section">
        <el-divider content-position="left">
          <el-icon><DataAnalysis /></el-icon>
          分析结果
        </el-divider>

        <!-- 图表展示 -->
        <el-card class="chart-card" v-if="showChart">
          <template #header>
            <div class="chart-header">
              <span>📈 可视化图表</span>
              <el-radio-group v-model="chartType" size="small">
                <el-radio-button label="bar">柱状图</el-radio-button>
                <el-radio-button label="line">折线图</el-radio-button>
                <el-radio-button label="pie">饼图</el-radio-button>
                <el-radio-button label="radar">雷达图</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container" ref="chartRef"></div>
        </el-card>

        <!-- 数据透视表 -->
        <el-card class="table-card">
          <template #header>
            <div class="table-header">
              <span>📋 数据透视表</span>
              <div class="table-actions">
                <el-switch
                  v-model="showChart"
                  active-text="显示图表"
                  inactive-text="隐藏图表"
                />
                <el-button size="small" @click="handleCopyData">
                  <el-icon><DocumentCopy /></el-icon>
                  复制数据
                </el-button>
              </div>
            </div>
          </template>
          <el-table
            :data="pivotData"
            border
            stripe
            show-summary
            :summary-method="getSummaries"
            max-height="500"
          >
            <el-table-column
              v-for="col in pivotColumns"
              :key="col.field"
              :prop="col.field"
              :label="col.label"
              :width="col.width"
              :align="col.align || 'left'"
            >
              <template #default="{ row }">
                <span v-if="col.type === 'number'" class="number-cell">
                  {{ formatNumber(row[col.field]) }}
                </span>
                <span v-else>{{ row[col.field] }}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            v-if="pivotData.length > 20"
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.size"
            :total="pivotData.length"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, sizes, prev, pager, next"
            style="margin-top: 20px; justify-content: flex-end;"
          />
        </el-card>

        <!-- 数据洞察 -->
        <el-card class="insight-card">
          <template #header>
            <span>💡 数据洞察</span>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="6" v-for="insight in insights" :key="insight.label">
              <div class="insight-item">
                <div class="insight-icon" :style="{ background: insight.color }">
                  <el-icon :size="24">
                    <component :is="insight.icon" />
                  </el-icon>
                </div>
                <div class="insight-content">
                  <div class="insight-label">{{ insight.label }}</div>
                  <div class="insight-value">{{ insight.value }}</div>
                  <div class="insight-desc">{{ insight.desc }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 空状态 -->
      <el-empty
        v-else
        description="请配置字段并执行分析"
        :image-size="200"
      >
        <el-button type="primary" @click="handleLoadTemplate">
          <el-icon><MagicStick /></el-icon>
          加载模板配置
        </el-button>
      </el-empty>
    </el-card>

    <!-- 保存配置对话框 -->
    <el-dialog v-model="saveDialogVisible" title="保存配置" width="500px">
      <el-form :model="saveForm" label-width="100px">
        <el-form-item label="配置名称">
          <el-input v-model="saveForm.name" placeholder="请输入配置名称" />
        </el-form-item>
        <el-form-item label="配置描述">
          <el-input
            v-model="saveForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入配置描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="saveDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveSubmit">保存</el-button>
      </template>
    </el-dialog>

    <!-- 加载配置对话框 -->
    <el-dialog v-model="loadDialogVisible" title="加载配置" width="600px">
      <el-table :data="savedConfigs" @row-click="handleSelectConfig">
        <el-table-column prop="name" label="配置名称" />
        <el-table-column prop="description" label="描述" show-overflow-tooltip />
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button link type="danger" @click.stop="handleDeleteConfig(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Check, FolderOpened, Download, Refresh, Search, Menu, Close,
  TrendCharts, DataAnalysis, DocumentCopy, MagicStick,
  Shop, User, Box, Money, Calendar, TrophyBase
} from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import * as echarts from 'echarts'

// 字段搜索
const fieldSearch = ref('')

// 可用字段
const availableFields = ref([
  { id: 'storeName', label: '门店名称', type: 'dimension', field: 'storeName' },
  { id: 'storeCode', label: '门店编码', type: 'dimension', field: 'storeCode' },
  { id: 'storeType', label: '门店类型', type: 'dimension', field: 'storeType' },
  { id: 'region', label: '所属区域', type: 'dimension', field: 'region' },
  { id: 'manager', label: '店长', type: 'dimension', field: 'manager' },
  { id: 'date', label: '日期', type: 'time', field: 'date' },
  { id: 'month', label: '月份', type: 'time', field: 'month' },
  { id: 'quarter', label: '季度', type: 'time', field: 'quarter' },
  { id: 'year', label: '年份', type: 'time', field: 'year' },
  { id: 'sales', label: '销售额', type: 'measure', field: 'sales', aggregation: 'sum' },
  { id: 'orderCount', label: '订单数', type: 'measure', field: 'orderCount', aggregation: 'sum' },
  { id: 'customerCount', label: '客流量', type: 'measure', field: 'customerCount', aggregation: 'sum' },
  { id: 'avgOrderValue', label: '客单价', type: 'measure', field: 'avgOrderValue', aggregation: 'avg' },
  { id: 'profit', label: '利润', type: 'measure', field: 'profit', aggregation: 'sum' },
  { id: 'profitRate', label: '利润率', type: 'measure', field: 'profitRate', aggregation: 'avg' },
  { id: 'staffCount', label: '员工数', type: 'measure', field: 'staffCount', aggregation: 'sum' }
])

// 过滤后的字段
const filteredFields = computed(() => {
  if (!fieldSearch.value) return availableFields.value
  return availableFields.value.filter(field =>
    field.label.toLowerCase().includes(fieldSearch.value.toLowerCase())
  )
})

// 配置字段
const rowFields = ref([])
const columnFields = ref([])
const valueFields = ref([])
const filterFields = ref([])

// 加载状态
const loading = ref(false)

// 透视数据
const pivotData = ref([])
const pivotColumns = ref([])

// 图表
const showChart = ref(true)
const chartType = ref('bar')
const chartRef = ref(null)
let chartInstance = null

// 洞察数据
const insights = ref([])

// 分页
const pagination = reactive({
  page: 1,
  size: 20
})

// 对话框
const saveDialogVisible = ref(false)
const loadDialogVisible = ref(false)

// 保存表单
const saveForm = reactive({
  name: '',
  description: ''
})

// 已保存配置
const savedConfigs = ref([
  {
    id: 1,
    name: '门店月度销售分析',
    description: '按月份和门店统计销售数据',
    createTime: '2024-01-15 10:30:00',
    config: {
      rowFields: [{ id: 'month', label: '月份', type: 'time', field: 'month' }],
      columnFields: [{ id: 'storeName', label: '门店名称', type: 'dimension', field: 'storeName' }],
      valueFields: [{ id: 'sales', label: '销售额', type: 'measure', field: 'sales', aggregation: 'sum' }],
      filterFields: []
    }
  },
  {
    id: 2,
    name: '区域门店业绩对比',
    description: '按区域对比各门店业绩',
    createTime: '2024-01-14 15:20:00',
    config: {
      rowFields: [{ id: 'region', label: '所属区域', type: 'dimension', field: 'region' }],
      columnFields: [{ id: 'storeType', label: '门店类型', type: 'dimension', field: 'storeType' }],
      valueFields: [
        { id: 'sales', label: '销售额', type: 'measure', field: 'sales', aggregation: 'sum' },
        { id: 'profit', label: '利润', type: 'measure', field: 'profit', aggregation: 'sum' }
      ],
      filterFields: []
    }
  }
])

// 克隆字段
const cloneField = (field) => {
  return { ...field, id: `${field.id}_${Date.now()}` }
}

// 移除字段
const removeField = (fields, index) => {
  fields.splice(index, 1)
}

// 获取字段图标
const getFieldIcon = (type) => {
  const iconMap = {
    dimension: Shop,
    time: Calendar,
    measure: TrendCharts
  }
  return iconMap[type] || Box
}

// 获取字段类型标签
const getFieldTypeTag = (type) => {
  const map = {
    dimension: 'primary',
    time: 'warning',
    measure: 'success'
  }
  return map[type] || 'info'
}

// 获取字段类型名称
const getFieldTypeName = (type) => {
  const map = {
    dimension: '维度',
    time: '时间',
    measure: '度量'
  }
  return map[type] || type
}

// 执行分析
const handleAnalyze = async () => {
  if (valueFields.value.length === 0) {
    ElMessage.warning('请至少添加一个数值字段')
    return
  }

  loading.value = true

  // 模拟数据分析
  setTimeout(() => {
    generatePivotData()
    generateInsights()
    loading.value = false
    ElMessage.success('分析完成')
    
    // 生成图表
    nextTick(() => {
      renderChart()
    })
  }, 1000)
}

// 生成透视数据
const generatePivotData = () => {
  // 模拟生成数据
  const data = []
  const stores = ['深圳旗舰店', '上海陆家嘴店', '北京国贸店', '广州天河店']
  const months = ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06']
  
  stores.forEach(store => {
    months.forEach(month => {
      data.push({
        storeName: store,
        month: month,
        sales: Math.floor(Math.random() * 500000) + 100000,
        orderCount: Math.floor(Math.random() * 500) + 200,
        customerCount: Math.floor(Math.random() * 2000) + 1000,
        profit: Math.floor(Math.random() * 100000) + 20000,
        avgOrderValue: Math.floor(Math.random() * 500) + 300
      })
    })
  })

  pivotData.value = data

  // 生成列配置
  const columns = []
  if (rowFields.value.length > 0) {
    rowFields.value.forEach(field => {
      columns.push({
        field: field.field,
        label: field.label,
        width: 120,
        align: 'left'
      })
    })
  }
  if (columnFields.value.length > 0) {
    columnFields.value.forEach(field => {
      columns.push({
        field: field.field,
        label: field.label,
        width: 150,
        align: 'left'
      })
    })
  }
  valueFields.value.forEach(field => {
    columns.push({
      field: field.field,
      label: `${field.label}(${field.aggregation})`,
      width: 120,
      align: 'right',
      type: 'number'
    })
  })

  pivotColumns.value = columns
}

// 生成洞察
const generateInsights = () => {
  insights.value = [
    {
      label: '总销售额',
      value: '¥1,245万',
      desc: '同比增长 +15.8%',
      icon: Money,
      color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    },
    {
      label: '最佳门店',
      value: '深圳旗舰店',
      desc: '销售额 ¥456万',
      icon: Shop,
      color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
    },
    {
      label: '平均订单数',
      value: '348单/月',
      desc: '环比增长 +8.5%',
      icon: TrendCharts,
      color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
    },
    {
      label: '总利润率',
      value: '25.3%',
      desc: '高于行业均值',
      icon: TrophyBase,
      color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
    }
  ]
}

// 渲染图表
const renderChart = () => {
  if (!chartRef.value || pivotData.value.length === 0) return

  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }

  const option = getChartOption()
  chartInstance.setOption(option)

  window.addEventListener('resize', () => {
    chartInstance?.resize()
  })
}

// 获取图表配置
const getChartOption = () => {
  const stores = [...new Set(pivotData.value.map(item => item.storeName))]
  const months = [...new Set(pivotData.value.map(item => item.month))].sort()

  if (chartType.value === 'bar' || chartType.value === 'line') {
    const series = stores.map(store => {
      const data = months.map(month => {
        const item = pivotData.value.find(d => d.storeName === store && d.month === month)
        return item ? item.sales : 0
      })
      return {
        name: store,
        type: chartType.value,
        data: data,
        smooth: chartType.value === 'line'
      }
    })

    return {
      tooltip: { trigger: 'axis' },
      legend: { data: stores },
      xAxis: { type: 'category', data: months },
      yAxis: { type: 'value', name: '销售额(元)' },
      series: series
    }
  } else if (chartType.value === 'pie') {
    const data = stores.map(store => {
      const total = pivotData.value
        .filter(item => item.storeName === store)
        .reduce((sum, item) => sum + item.sales, 0)
      return { name: store, value: total }
    })

    return {
      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
      legend: { bottom: 10 },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        data: data
      }]
    }
  } else if (chartType.value === 'radar') {
    const indicators = months.map(month => ({ name: month, max: 600000 }))
    const series = stores.map(store => {
      const data = months.map(month => {
        const item = pivotData.value.find(d => d.storeName === store && d.month === month)
        return item ? item.sales : 0
      })
      return { name: store, value: data }
    })

    return {
      tooltip: {},
      legend: { data: stores },
      radar: { indicator: indicators },
      series: [{
        type: 'radar',
        data: series
      }]
    }
  }
}

// 监听图表类型变化
watch(chartType, () => {
  if (chartInstance && pivotData.value.length > 0) {
    renderChart()
  }
})

// 格式化数字
const formatNumber = (value) => {
  if (typeof value !== 'number') return value
  return value.toLocaleString()
}

// 汇总行
const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map(item => Number(item[column.property]))
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0).toLocaleString()
    } else {
      sums[index] = '-'
    }
  })
  return sums
}

// 保存配置
const handleSaveConfig = () => {
  if (rowFields.value.length === 0 && columnFields.value.length === 0) {
    ElMessage.warning('请先配置分析字段')
    return
  }
  saveDialogVisible.value = true
}

const handleSaveSubmit = () => {
  if (!saveForm.name) {
    ElMessage.warning('请输入配置名称')
    return
  }

  const config = {
    id: Date.now(),
    name: saveForm.name,
    description: saveForm.description,
    createTime: new Date().toLocaleString(),
    config: {
      rowFields: rowFields.value,
      columnFields: columnFields.value,
      valueFields: valueFields.value,
      filterFields: filterFields.value
    }
  }

  savedConfigs.value.unshift(config)
  ElMessage.success('配置保存成功')
  saveDialogVisible.value = false
  saveForm.name = ''
  saveForm.description = ''
}

// 加载配置
const handleLoadConfig = () => {
  loadDialogVisible.value = true
}

const handleSelectConfig = (row) => {
  rowFields.value = [...row.config.rowFields]
  columnFields.value = [...row.config.columnFields]
  valueFields.value = [...row.config.valueFields]
  filterFields.value = [...row.config.filterFields]
  loadDialogVisible.value = false
  ElMessage.success('配置加载成功')
}

const handleDeleteConfig = (row) => {
  ElMessageBox.confirm('确定要删除此配置吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = savedConfigs.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      savedConfigs.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

// 加载模板
const handleLoadTemplate = () => {
  if (savedConfigs.value.length > 0) {
    handleSelectConfig(savedConfigs.value[0])
  } else {
    ElMessage.info('暂无模板配置')
  }
}

// 重置
const handleReset = () => {
  rowFields.value = []
  columnFields.value = []
  valueFields.value = []
  filterFields.value = []
  pivotData.value = []
  pivotColumns.value = []
  insights.value = []
  ElMessage.success('已重置')
}

// 导出数据
const handleExport = () => {
  if (pivotData.value.length === 0) {
    ElMessage.warning('暂无数据可导出')
    return
  }
  ElMessage.success('正在导出数据')
}

// 复制数据
const handleCopyData = () => {
  ElMessage.success('数据已复制到剪贴板')
}
</script>

<style scoped>
.store-pivot-analysis {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 配置区域 */
.config-section {
  margin-bottom: 20px;
}

.field-card {
  height: 600px;
}

.field-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-list {
  max-height: 480px;
  overflow-y: auto;
}

.field-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: move;
  transition: all 0.3s;
}

.field-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
}

.field-icon {
  font-size: 16px;
  color: #606266;
}

.field-name {
  flex: 1;
  font-size: 14px;
}

.drop-zone-card {
  height: 180px;
  margin-bottom: 15px;
}

.zone-title {
  font-weight: 600;
}

.drop-zone {
  min-height: 100px;
  padding: 10px;
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
  background: #fafafa;
}

.drop-zone.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-placeholder {
  color: #909399;
  text-align: center;
}

.selected-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 5px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  cursor: move;
}

.value-zone .selected-field,
.filter-zone .selected-field {
  flex-wrap: wrap;
}

.analyze-section {
  text-align: center;
  margin: 30px 0;
}

/* 结果展示 */
.result-section {
  margin-top: 30px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-header,
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.chart-container {
  width: 100%;
  height: 400px;
}

.table-card {
  margin-bottom: 20px;
}

.number-cell {
  font-weight: 600;
  color: #f56c6c;
}

/* 洞察卡片 */
.insight-card {
  margin-top: 20px;
}

.insight-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.insight-item:hover {
  transform: translateY(-5px);
}

.insight-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.insight-content {
  flex: 1;
}

.insight-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 5px;
}

.insight-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.insight-desc {
  font-size: 12px;
  color: #67c23a;
}
</style>

